---
title: Migration depuis Eleventy
description: Conseils pour la migration d'un projet Eleventy existant vers Astro
sidebar:
  label: Eleventy
type: migration
stub: true
framework: Eleventy
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { Steps, LinkCard, CardGrid } from '@astrojs/starlight/components';

[Eleventy](https://11ty.dev) est un générateur de sites statiques open source qui fonctionne avec plusieurs langages de modèles.

## Principales similitudes entre Eleventy (11ty) et Astro

Eleventy (11ty) et Astro partagent certaines similitudes qui vous aideront à migrer votre projet :

- Astro et Eleventy sont tous deux des générateurs de sites modernes, basés sur JavaScript (Jamstack).

- Astro et Eleventy vous permettent tous deux d'utiliser un [CMS headless, des APIs ou des fichiers Markdown pour les données](/fr/guides/data-fetching/). Vous pouvez continuer à utiliser votre système préféré de création de contenu et conserver votre contenu existant.

## Principales différences entre Eleventy (11ty) et Astro

Lorsque vous recréez votre site Eleventy (11ty) dans Astro, vous remarquerez quelques différences importantes :

- Eleventy prend en charge une variété de langages de création de modèles. Astro prend en charge l'[utilisation de composants de plusieurs frameworks JS populaires (par exemple React, Svelte, Vue, Solid)](/fr/guides/framework-components/), mais utilise des [mises en page, des pages et des composants](/fr/basics/astro-components/) Astro pour la plupart des modèles de pages.

- Astro utilise un répertoire [`src/`](/fr/basics/project-structure/#src) pour tous les fichiers, y compris les métadonnées du site, qui sont disponibles pour être interrogés et traités pendant la création du site. Dans ce dossier se trouve un [dossier spécial `src/pages/` pour le routage basé sur les fichiers](/fr/basics/astro-pages/).

- Astro utilise un dossier [`public/` pour les ressources statiques](/fr/basics/project-structure/#public) qui n'ont pas besoin d'être traitées ou transformées pendant la compilation.

- Dans Eleventy, le regroupement du CSS, du JavaScript et des autres ressources doit être configuré manuellement. [Astro gère cela pour vous dès le départ](/fr/concepts/why-astro/#facile-à-utiliser).

## Passer d'Eleventy à Astro

Pour convertir un blog Eleventy en Astro, commencez par notre modèle de démarrage de thème de blog, ou explorez d'autres thèmes de blog communautaires dans notre [vitrine de thèmes](https://astro.build/themes/).

Vous pouvez passer un argument `--template` à la commande `create astro` pour démarrer un nouveau projet Astro avec l'un de nos modèles de démarrage officiels. Vous pouvez aussi [démarrer un nouveau projet à partir de n'importe quel dépôt Astro existant sur GitHub](/fr/install-and-setup/#utiliser-un-thème-ou-un-modèle-de-démarrage).

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration optionnelle) comme contenu pour [créer des pages Markdown ou MDX](/fr/guides/markdown-content/).

Votre projet Eleventy vous a permis d'utiliser une variété de langages de création de modèles pour créer votre site. Dans un projet Astro, la création de modèles pour vos pages sera principalement réalisée à l'aide de composants Astro, qui peuvent être utilisés comme éléments d'interface utilisateur, de mises en page et même de pages complètes. Vous pouvez explorer [la syntaxe des composants Astro](/fr/basics/astro-components/) pour découvrir comment créer des modèles dans Astro en utilisant des composants.

Pour convertir d'autres types de sites, comme un portfolio ou un site de documentation, consultez d'autres modèles de départ officiels sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod.

## Ressources communautaires

<CardGrid>

  <LinkCard title="Ce site est désormais construit avec Astro (Anglais)" href="https://aqandrew.com/blog/now-built-with-astro/" description="Pourquoi j'ai quitté Eleventy."/>

  <LinkCard title="Réécriture du site Web : 2025 (Anglais)" href="https://www.welchcanavan.com/posts/site-rewrite-2025/" />

</CardGrid>

:::note[Vous avez une ressource à partager ?]
Si vous avez trouvé (ou créé !) une vidéo ou un article de blog utile sur la conversion d'un site Eleventy en site Astro, [ajoutez-le à cette liste](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-eleventy.mdx) !
:::
